<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button
            type="success"
            plain
            size="small"
            icon="fa fa-mail-forward"
            @click="returnList"
            >返回</el-button
          >
        </div>
        <el-row>
          <el-form-item label="姓名:">
            <span>{{ dataInfo.name }}</span>
          </el-form-item>
          <el-form-item label="年龄:">
            <span>{{ dataInfo.age }}</span>
          </el-form-item>
          <el-form-item label="电话:">
            <span>{{ dataInfo.phone }}</span>
          </el-form-item>
          <el-form-item label="身份证:">
            <span>{{ dataInfo.idCard }}</span>
          </el-form-item>
          <el-form-item label="健康信息:">
            <div v-if="dataInfo.recentHealth">
              {{dataInfo.recentHealth.overview }}
              <span
                @click="showHealthy = true"
                style="color: red;cursor:pointer"
                >查看更多</span
              >
            </div>
          </el-form-item>
          <el-form-item label="家庭信息:">
            <span @click="showFamilies = true" style="color: red;cursor:pointer"
              >查看</span
            >
          </el-form-item>
        </el-row>
        <div class="tit">
          <h2
            style="display: flex;justify-content:space-between;align-items: center;width:100%"
          >
            订单信息
            <el-button
              type="primary"
              size="mini"
              @click="handleMore"
              >更多订单信息</el-button
            >
          </h2>
        </div>
        <el-row>
          <el-table :data="dataInfo.orders">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="orderNo"
              label="订单编号"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column
              align="center"
              width="120"
              label="产品名称"
              prop="goodsNames"
            >
              <template slot-scope="scope">
                <el-tag
                  v-for="(item, index) in scope.row.orderTag"
                  :key="index"
                  :color="item.color"
                  size="mini"
                  effect="dark"
                  style="border:none;margin-right: 2px;"
                >
                  {{ item.tagName }}
                </el-tag>
                <span>{{ scope.row.goodsNames }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="商户/部门" width="150px">
              <template slot-scope="scope">
                <span>{{ scope.row.businessName }}</span
                ><br />
                <span>{{ scope.row.departName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="服务员"
              prop="waiterName"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="购买总数"
              prop="nums"
            >
            </el-table-column>
            <el-table-column
              label="支付金额"
              prop="realAmount"
              align="center"
            >
            </el-table-column>
            <el-table-column label="支付方式"  align="center">
          <template slot-scope="scope">
            <div>
              {{ formatPayType(scope.row.payType) }}
            </div>
          </template>
        </el-table-column>
          </el-table>
        </el-row>
        <div class="tit">
          <h2
            style="display: flex;justify-content:space-between;align-items: center;width:100%"
          >
            场所
          </h2>
        </div>
        <el-row>
          <el-table :data="dataInfo.locales" max-height="600px">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="100"
            ></el-table-column>
            <el-table-column label="场所地址" align="center" width="200">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.provinceName }}{{ scope.row.cityName
                  }}{{ scope.row.areaName }}{{ scope.row.streetName
                  }}{{ scope.row.address }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="栋单元层" align="center" width="200">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.buildName }}{{ scope.row.unitName
                  }}{{ scope.row.floorName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="场所类型" align="center">
              <template slot-scope="scope">
                <span>
                  <el-tag
                    size="mini"
                    effect="dark"
                    :type="formatLocaleTypes(scope.row.localeType)"
                  >
                    {{ formatLocaleType(scope.row.localeType) }}
                  </el-tag>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </div>

    <el-dialog
      center
      title="家庭信息"
      :visible.sync="showFamilies"
      width="fit-content"
    >
      <el-table class="family-table" :data="dataInfo.families">
        <el-table-column
          type="index"
          prop="name"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="头像" width="130" align="center">
          <template slot-scope="{ row }">
            <el-image
              style="width: 120px;height:120px"
              fit="cover"
              :src="row.avatar"
              :preview-list-src="[row.avatar]"
            ></el-image>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="name"
          label="姓名"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="性别" width="100" align="center">
          <template slot-scope="{ row }">
            <div>
              {{ row.sex == 1 ? "男" : "女" }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="age"
          label="年龄"
          width="100"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="phone"
          label="手机号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="住址"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="company"
          label="公司"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="companyAddress"
          label="公司地址"
          width="200"
          align="center"
        ></el-table-column>

        <!-- <el-table-column label="居住情况" width="100" align="center">
          <template slot-scope="{ row }">
            <div>{{ formatLiveFlag(row.liveFlag) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="自理能力" width="100" align="center">
          <template slot-scope="{ row }">
            <div>{{ formatAdlFlag(row.adlFlag) }}</div>
          </template>
        </el-table-column> -->
      </el-table>
    </el-dialog>

    <el-dialog
      v-if="dataInfo.recentHealth"
      center
      title="健康信息"
      :visible.sync="showHealthy"
      width="fit-content"
    >
      <div class="healthy-list">
        <div class="item">
          <div class="label">
            身高：
          </div>
          <div class="value">{{ dataInfo.recentHealth.height }}cm</div>
        </div>
        <div class="item">
          <div class="label">
            体重：
          </div>
          <div class="value">{{ dataInfo.recentHealth.weight }}kg</div>
        </div>
        <div class="item">
          <div class="label">
            腰围：
          </div>
          <div class="value">{{ dataInfo.recentHealth.waist }}cm</div>
        </div>
        <div class="item">
          <div class="label">
            视力：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.vision }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            血型：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.blood }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            过敏史：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.allergies }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            收缩压：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.systolic }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            舒张压：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.diastolic }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            血糖情况：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.bloodGlucose }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            血脂情况：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.bloodLipid }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            血压情况：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.bloodPressure }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            脉搏数/分：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.pulse }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            其它慢性病：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.puotherDiseaseslse }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            冠心病：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.coronaryHeart }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            脑卒中：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.stroke }}
          </div>
        </div>
        <div class="item">
          <div class="label">
            其它症状：
          </div>
          <div class="value">
            {{ dataInfo.recentHealth.others }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ResidentCardApi from "@/api/resident/residentCard";
export default {
  data() {
    return {
      activeNames: [],
      dataInfo: {},
      showFamilies: false,
      showHealthy: false
    };
  },
  computed: {
    healthyList() {
      return this.dataInfo.healthy ? Object.entries(this.dataInfo.healthy) : [];
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      const { userId, localeIds } = this.$route.query;
      ResidentCardApi.getResidentCardInfo({ userId, localeIds }).then(res => {
        this.dataInfo = res.data;
      });
    },
    handleMore(){
      this.$router.push({
       name:"OrderManagement",
        params:{
          safetyEquipIds:this.dataInfo.safetyEquipIds.toString(),
        }
      })
    },
    formatPayType(cellValue) {
      if (cellValue === 1) {
        return "余额";
      } else if (cellValue === 2) {
        return "微信支付";
      } else if (cellValue === 3) {
        return "货到付款";
      } else if (cellValue === 4) {
        return "他人代付";
      } else if (cellValue === 5) {
        return "0元购";
      } else if (cellValue === 6) {
        return "线下月结";
      } else if (cellValue === 7) {
        return "线下余额";
      }
    },
    formatLiveFlag(type) {
      switch (type) {
        case 1:
          return "独居";
        case 2:
          return "伴侣独居";
        case 3:
          return "亲人同住";
        case 4:
          return "养老院";
      }
    },
    formatAdlFlag(type) {
      switch (type) {
        case 1:
          return "可自理";
        case 2:
          return "轻度依赖";
        case 3:
          return "中度依赖";
        case 4:
          return "不能自理";
      }
    },
    formatLocaleType(cellValue) {
      if (cellValue === 1) {
        return "公共";
      } else if (cellValue === 2) {
        return "专属";
      }
    },
    formatLocaleTypes(cellValue) {
      if (cellValue === 2) {
        return "success";
      } else if (cellValue === 1) {
        return "danger";
      }
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/resident/residentCardManagement" });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.healthy-list {
  border: 1px solid #ebeef5;
  overflow: auto;
  max-height: 700px;
  .item {
    display: flex;
    padding: 10px 0;
    .label {
      text-align: right;
      width: 160px;
      padding-right: 40px;
    }
    .value {
      width: 200px;
      // text-align: center;
    }
  }
}
.el-collapse {
  width: 1000px;
  border: none;
  // transform: translateX(-85px) translateY(-12px);
  &::v-deep .el-collapse-item__header {
    border: none;
    i {
      display: none;
    }
  }
  &::v-deep .el-collapse-item__wrap {
    border: none;
  }
  .family-table {
    width: fit-content;
    max-width: fit-content;
    z-index: 999;
  }
}
.img-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 3px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;

  .el-image {
    width: 100%;
    &::v-deep img {
      height: auto;
    }
  }
}
</style>
